<template>
  <el-form ref="form" label-width="100" :model="model" :rules="rules">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="名称" prop="name">
          <el-input placeholder="请填写名称" v-model="model.name" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="标识" prop="label">
          <el-input placeholder="请填写标识" v-model="model.label" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input placeholder="请填写备注" v-model="model.remark" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="权限">
          <MenuCheck ref="menuCheck" @ok="handleMenuCheckOk" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item>
          <div style="width: 100%; text-align: right">
            <el-button type="default" @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确认</el-button>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { addRole, updRole } from "@/api/role";
import MenuCheck from "@/components/menu-check/index.vue";

export default {
  components: {
    MenuCheck,
  },

  data() {
    return {
      model: {
        id: 0, // 为 0 为新增，否则为编辑
        name: "",
        label: "",
        remark: "",
        menuIdList: [],
      },

      rules: {
        name: [{ required: true, message: "必填" }],
        label: [{ required: true, message: "必填" }],
      },
    };
  },

  computed: {
    // 是否编辑模式
    isEditMode() {
      return this.model.id !== 0;
    },
  },

  methods: {
    /**
     * 处理 MenuCheck 组件数据获取完成
     */
    handleMenuCheckOk() {
      console.log("handleMenuCheckOk");
      // 针对 MenuCheck 组件，需要单独调用它的 set() 方法来控制勾选
      this.$refs.menuCheck.set(this.model.menuIdList);
    },
    /**
     * 设置 model 数据
     */
    setModel(model) {
      // 该操作不合适，会直接覆盖到我原本的 this.model, 导致一些属性不存在了
      // this.model = model;

      // this.model.name = model.name
      // this.model.label = model.label || ''
      // this.model.id = model.id || 0
      // this.model.menuIdList = model.menuIdList
      // ....
      Object.assign(this.model, model);

      // 针对 MenuCheck 组件，需要单独调用它的 set() 方法来控制勾选
      //    Bug: MenuCheck set 方法，必须要等到它内部的 数据获取成功之后再触发才正确。
      //        让 MenuCheck 组件，提供一个自定义事件出来
      // this.$refs.menuCheck.set(model.menuIdList);
    },

    /**
     * 取消处理
     */
    handleCancel() {
      // 通知父组件，我取消了
      this.$emit("cancel");
    },

    /**
     * 确认处理
     */
    async handleConfirm() {
      // 1. 表单校验
      await this.$refs.form.validate();
      // 2. 获取 勾选的菜单Id集合
      const menuIdList = this.$refs.menuCheck.get();
      // 3. 根据 isEditMode 来控制调用不同的接口
      if (this.isEditMode) {
        await updRole({
          ...this.model,
          menuIdList,
        });
      } else {
        const { id, ...model } = this.model;
        await addRole({
          ...model,
          menuIdList,
        });
      }
      // 3. 通知父组件，我OK了。
      this.$emit("success");
    },
  },

  unmounted() {
    console.log("unmounted");
  },
};
</script>
